<template>
  <div id="user-chat-body" :class="showActionExpend">
    <!-- chat-action-extend-active -->
    <header id="header" class="mui-bar mui-bar-nav">
      <h1 class="mui-title">{{ friend_alias }}</h1>
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" @click="$router.goBack()"></a>
      <a class="mui-icon mui-icon-bars mui-pull-right" @click="goFriendCard"></a>
    </header>
    <div id="char-panel" class="margin-top-40">
      <ul class="chat-list">
        <div v-for="chatItem in chatList">
          <li :class="chatItem.user_id == friend_id ? 'my' : 'other'">
            <div class="chat-header">
              <img v-if="chatItem.user_id == friend_id" :src="my_header" />
              <img v-else :src="target_header" />
            </div>
            <div class="chat-content" :chat_id="chatItem.chat_id">
              <p v-if="chatItem.chat_mod == 1">{{ chatItem.chat_content }}</p>
              <img
                v-else-if="chatItem.chat_mod == 2"
                :src="chatItem.chat_content"
                class="express"
                alt
              />
              <img
                v-else-if="chatItem.chat_mod == 3"
                :src="chatItem.chat_content"
                @click="viewPic(chatItem.chat_content)"
                class="express-image"
                alt
              />
            </div>
          </li>
        </div>
      </ul>
    </div>
    <div id="chat-action-panel" class>
      <div class="chat-base-action">
        <a>
          <span class="mui-icon mui-icon-mic"></span>
        </a>
        <input type="text" name="content" @keyup.enter="sendMeassges" v-model="content" />
        <a id="btnSendExpress">
          <van-icon
            name="smile-o"
            @click="showActionExpend == 'chat-action-extend-active chat-action-extend-active-express' ? showActionExpend = '' : showActionExpend = 'chat-action-extend-active chat-action-extend-active-express'"
          />
        </a>
        <a
          @click="showActionExpend == 'chat-action-extend-active chat-action-extend-active-other' ? showActionExpend = '' : showActionExpend = 'chat-action-extend-active chat-action-extend-active-other'"
        >
          <span class="mui-icon mui-icon-plusempty"></span>
        </a>
        <a id="send" class="sent" @click="sendMeassges">发送</a>
      </div>
      <div class="chat-action-extend">
        <div class="chat-express">
          <div class="chat-express-item chat-express-default">
            <div>
              <img
                v-for="defatultItem in defaultExpress"
                :src="defatultItem"
                @click="sendExpress(defatultItem)"
              />
            </div>
          </div>
          <ul class="chat-express-ul">
            <li class="active">
              <van-icon name="smile-o" />
            </li>
            <!-- <li><van-icon name="setting-o" /></li> -->
          </ul>
        </div>
        <div class="chat-other">
          <a class="chat-other-item-panel" @click="activateBtnImage">
            <div class="chat-other-item">
              <span class="mui-icon mui-icon-image"></span>
            </div>
            <span class="chat-other-item-title">图片</span>
            <input type="file" id="imageFileInput" @change="sendImage" />
          </a>
          <a class="chat-other-item-panel">
            <div class="chat-other-item">
              <span class="mui-icon mui-icon-mic"></span>
            </div>
            <span class="chat-other-item-title">语音</span>
          </a>
          <a class="chat-other-item-panel">
            <div class="chat-other-item">
              <span class="mui-icon mui-icon-videocam"></span>
            </div>
            <span class="chat-other-item-title">视频</span>
          </a>
          <a class="chat-other-item-panel">
            <div class="chat-other-item">
              <span class="mui-icon mui-icon-location"></span>
            </div>
            <span class="chat-other-item-title">位置</span>
          </a>
          <a class="chat-other-item-panel">
            <div class="chat-other-item">
              <span class="mui-icon mui-icon-paperclip"></span>
            </div>
            <span class="chat-other-item-title">文件</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import axios from "axios";
import { api } from "../assets/js/api";
import { Toast } from "vant";
import { WebSocketServer } from "../assets/js/websocket";
import { Icon, ImagePreview, Dialog } from "vant";
import $ from "jquery";
Vue.use(Icon)
  .use(ImagePreview)
  .use(Dialog);

export default {
  data() {
    return {
      friend_id: "", //好友ID
      content: "", //消息框内容
      my_header: "", //我的头像
      target_header: "", //好友头像
      friend_alias: "", //好友备注
      chatList: [], //消息列表
      friend_data: [], //好友信息
      defaultExpress: [], //默认表情包列表
      showActionExpend: "", //当前状态
      images: []
    };
  },
  watch: {
    $route() {
      this.changeChat();
    },
    chatList() {
      this.scrollToBottom();
    }
  },
  methods: {
    // goBack: function() {
    //   this.$router.goBack();
    // },
    viewPic: function(imgUrl) {
      ImagePreview([imgUrl]);
    },
    initToach: function() {
      $(function() {
        var chatTimer = null;
        $(".chat-list").on("touchstart", ".my .chat-content", function() {
          let nowElem = $(this),chat_id = $(this).attr("chat_id");
          chatTimer = setTimeout(() => {
            Dialog.confirm({
              title: "系统消息",
              message: "是否确定要撤回本消息"
            }).then(() => {
              axios({
                url: api.chat.recall,
                method: "post",
                data: {
                  chat_id : chat_id
                }
              }).then(res => {
                res = res.data;
                if(res.code){
                  Toast("撤回成功");
                  nowElem.parent().remove();
                }else{
                  Toast(res.msg);
                }
              });
            });
          }, 1000);
        });
        $(".chat-list").on("touchmove", ".chat-content", function() {
          clearTimeout(chatTimer);
        });
        $(".chat-list").on("touchend", ".chat-content", function() {
          clearTimeout(chatTimer);
        });
      });
    },
    goFriendCard: function() {
      this.$router.push({
        path: "/FriendCard",
        query: {
          friend_id: this.friend_id
        }
      });
    },
    sendMeassges: function() {
      if (this.content == "") return false;
      var chatData = {
        chat_content: this.content,
        friend_id: this.friend_id,
        chat_mod: 1
      };
      this.sendChat(chatData);
    },
    sendExpress: function(express) {
      var chatData = {
        chat_content: express,
        friend_id: this.friend_id,
        chat_mod: 2
      };
      this.sendChat(chatData);
    },
    activateBtnImage: function() {
      document.getElementById("imageFileInput").click();
    },
    sendImage: function() {
      var file = document.getElementById("imageFileInput").files[0],
        formData = new FormData();
      formData.append("image", file);
      axios({
        url: api.util.uploadImg,
        method: "post",
        data: formData
      }).then(res => {
        var res = res.data;
        if (res.code) {
          var chatImage = res.data.imgUrl;
          var chatData = {
            chat_content: chatImage,
            friend_id: this.friend_id,
            chat_mod: 3
          };
          this.sendChat(chatData);
        } else {
          Toast(res.msg);
        }
      });
    },
    sendChat: function(chatData) {
      axios({
        url: api.chat.sendUserChat,
        method: "post",
        data: chatData
      }).then(res => {
        res = res.data;
        if (res.code) {
          if (res.data.chat.chat_mod == 2) {
            res.data.push.chat_content = "[express]";
          } else if (res.data.chat.chat_mod == 3) {
            res.data.push.chat_content = "[图片]";
          }
          WebSocketServer.sendPush({
            target: this.friend_id,
            action: "UserChat",
            header: this.my_header,
            data: res.data
          });
          this.chatList.push(res.data.chat);
          this.content = "";
          document.querySelector('input[name="content"]').focus();
        }
      });
    },
    initChat: function() {
      axios({
        url: api.chat.getUserChat,
        method: "post",
        data: {
          target_id: this.friend_id
        }
      }).then(res => {
        var data = res.data.data;
        this.chatList = data;
      });
    },
    initPanel: function() {
      axios({
        method: "post",
        url: api.friend.getFriendById,
        data: {
          target_id: this.friend_id
        }
      }).then(res => {
        res = res.data.data;
        // this.friend_data = res;
        this.target_header = res.user_header;
        this.friend_alias = res.group.friend_alias;
      });
      var user = localStorage.getItem("Now_User");
      user = JSON.parse(user);
      this.my_header = user.user_header;
    },
    initDefaultExpress: function() {
      for (var i = 1; i < 73; i++) {
        var index = i;
        if (i < 10) index = "0" + i;
        this.defaultExpress.push(
          "http://contact.yhong.info/uploads/img/express/default/default_0" +
            index +
            ".gif"
        );
      }
    },
    changeChat: function() {
      this.friend_id = this.$route.query.friend_id;
      location.reload();
    },
    scrollToBottom: function() {
      var container = this.$el.querySelector("#char-panel");
      window.scrollTo(0, container.scrollHeight);
    }
  },
  updated() {
    window.scrollTo(0, document.body.scrollHeight);
  },
  created() {
    this.friend_id = this.$route.query.friend_id;
    // this.friend_alias = this.$route.query.friend_alias;
    var _this = this;
    _this.initPanel();
    _this.initChat();
    _this.initDefaultExpress();
    _this.initToach();
   
  }
};
</script>
<style>
@import "../assets/css/chat.css";
</style>